<template class="box-body">
	<view class="box">
		<image class="bg-set" src="../../static/global-bg.jpg" mode="widthFix"></image>
		<view class="father-box">
			<view class="date">日期：{{dateStr}}</view>
			<view class="content">
				<view class="list-box" v-for="(item, index) in questionList" :key="index">
					<view class="item-box">
						{{item.question}}
					</view>
					<radio-group class="block" @change="radioChange($event,item)">
						<!-- #ifndef MP-ALIPAY -->
							<label class="radio"><radio :checked="item.checkedYes" :disabled="isSaved" style="transform:scale(0.7);" class='orange radio' value="1"></radio>是</label>
							<label class="radio"><radio :checked="item.checkedNo || !item.checkYes" :disabled="isSaved" style="transform:scale(0.7);" class='orange radio' value="0"></radio>否</label>
						<!-- #endif -->
					</radio-group>
				</view>
				<view v-if="!isSaved" class="text-btn" @click="handleSaveClick">
					保存今日心情
				</view>
				<view v-if="isSaved" class="text-btn">
					今日心情已保存
				</view>
				
			</view>
		</view>
		<dialog-modal
			:content="dialogContent"
			:title="dialogTitle"
			:dialogVisible="dialogVisible"
			@handleCancel="handleCancel"
			@handleSure="handleSure"
		>
		</dialog-modal>
		<uni-popup ref="popup" type="bottom">
			<view class="popup-wrap">
				<view class="popup-header">
					<text class="popup-header-item" @tap="close">关闭</text>
					<text class="popup-header-item" @tap="handleSave">保存</text>
					<text class="popup-header-item">{{question}}...</text>
				</view>
				<view class="popup-content">
					<input type="text" v-model="newContent" />
				</view>
			</view>
		</uni-popup>
		<tip-modal title="我的日记" :content="diary" :modalName="modalName" @hideModal="hideModal"></tip-modal>
	</view>
</template>

<script>
	import DialogModal from '@/components/DialogModal.vue'
	import TipModal from '@/components/TipModal.vue'
	import UniPopup from '@/components/uni-popup/uni-popup'
	import {uploadDiary, queryDiary} from '@/api/diary.js'
	import {mapState} from 'vuex'
	export default {
		components: {
			DialogModal,TipModal,UniPopup
		},
		data() {
			return {
				isSaved: false,
				question: '',
				questionList: [
					{
						id: 1,
						question: '我感到愉快',
						type: 'pos',
						isClick: -1
					},
					{
						id: 2,
						question: '我非常专注',
						type: 'pos',
						isClick: -1
					},
					{
						id: 3,
						question: '我发自内心地笑了',
						type: 'pos',
						isClick: -1
					},
					{
						id: 4,
						question: '我感受到了爱与关心',
						type: 'pos',
						isClick: -1
					},
					{
						id: 5,
						question: '我喜欢今天的生活',
						type: 'pos',
						isClick: -1
					},
					{
						id: 6,
						question: '我感到疲惫',
						type: 'neg',
						isClick: -1
					},
					{
						id: 7,
						question: '我有些焦虑',
						type: 'neg',
						isClick: -1
					},
					{
						id: 8,
						question: '我感到有压力',
						type: 'neg',
						isClick: -1
					},
					{
						id: 9,
						question: '我情绪非常低落',
						type: 'neg',
						isClick: -1
					},
					{
						id: 10,
						question: '我感到生活很没意思',
						type: 'neg',
						isClick: -1
					},
				],
				selected: '',
				dialogVisible: false,
				dialogContent:'每天只能保存一次，确定要保存吗？（建议在临睡前梳理一整天的生活）',
				dialogTitle: '提示',
				newContent: '',
				diaryContent: [],
				diary: '',
				newAnswer: '',
				modalName: '',
				userSelected: {
					q1: 0,
					q2: 0,
					q3: 0,
					q4: 0,
					q5: 0,
					q6: 0,
					q7: 0,
					q8: 0,
					q9: 0,
					q10: 0
				}
			};
		},
		mounted() {
			this.getDiary()
		},
		methods: {
			hideModal() {
				this.modalName = ''
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			radioChange(evt, item) {
				console.log(evt, item)
				this.selected = evt.target.value
				item.isCheck++
				this.userSelected['q'+item.id] = parseInt(this.selected)
				if (this.selected == 1) {
					console.log(this.selected)
					this.open()
					this.question = item.question + '是因为'
				}
			},
			handleCancel() {
				this.dialogVisible = false
			},
			handleSure() {
				// 写入数据库
				console.log(this.diaryContent.join('，'))
				if (this.dialogContent.length > 0) {
					this.diary = this.diaryContent.join('，').concat('。')
				} else {
					this.diary = '没有任何记录'
				}
				console.log(this.userSelected)
				let totalScore = 0
				for (let key in this.userSelected) {
					const keyArr = key.split('')
					if (keyArr[1] <= 5) {
						totalScore += this.userSelected[key]
					} else {
						totalScore -= this.userSelected[key]
					}
				}
				const info = {
					each_score: JSON.stringify(this.userSelected),
					total_score: totalScore,
					userid: this.userInfo.userid,
					diary: this.diary
				}
				console.log(info)
				// for(let i = 0; i < this.question.length; i++) {
				// 	console.log(this.question[i])
				// 	if (this.question[i].isClick == -1) {
				// 		return uni.showToast({
				// 			title: '请全部填写后再提交！',
				// 			icon: 'none',
				// 			duration: 2000
				// 		})
				// 	}
				// }
				uploadDiary(info).then(res => {
					if (res.code !== 200) {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration:1000
						})
					} else {
						this.isSaved = true
						this.modalName = 'Modal'
						uni.showToast({ title: "保存成功", duration: 2000, icon: "none" })
					}
				})
				this.dialogVisible = false
			},
			handleSaveClick() {
				this.dialogVisible = true
			},
			handleSave() {
				this.newAnswer = this.question+this.newContent
				console.log(this.newAnswer)
				this.diaryContent.push(this.newAnswer)
				this.newContent = ''
				this.close()
			},
			getDiary() {
				const info = {
					userId: this.userInfo.userid,
					date: this.dateQueryStr
				}
				queryDiary(info).then(res => {
					if (res.code !== 200) {
						return
					}
					this.isSaved = true
					console.log(res)
					const q = JSON.parse(res.data.eachScore)
					const newList = []
					for (let item in q) {
						const id = item.substring(1)
						console.log(q)
						const value = q["q"+id]
						const res = this.getById(id, this.questionList)
						console.log(id,value)
						if (res !== -1) {
							const obj = this.questionList[res]
							if (value == 0) {
								obj.checkedNo = true
							} else {
								obj.checkedYes = true
							}
						}
					}
					console.log(this.questionList)
				})
			},
		getById(id, myArray) {
			for(let i = 0; i < myArray.length; i++) {
				if (myArray[i].id == id) {
					return i
				}
			}
			return -1
		}
		},
		computed: {
			dateStr() {
				const date = new Date()
				const year = date.getFullYear()
				const month = (date.getMonth()+1) >= 10 ? (date.getMonth()+1) : '0'+(date.getMonth()+1)
				const day = (date.getDate()) >= 10 ? (date.getDate()) : '0'+(date.getDate())
				let weekday = date.getDay()
				switch(weekday) {
					case 0: weekday = '天';break;
					case 1: weekday = '一';break;
					case 2: weekday = '二';break;
					case 3: weekday = '三';break;
					case 4: weekday = '四';break;
					case 5: weekday = '五';break;
					case 6: weekday = '六';break;
				}
				return year+'年'+month+'月'+day+'日'+'  星期'+weekday
			},
			dateQueryStr() {
				const date = new Date()
				const year = date.getFullYear()
				const month = (date.getMonth()+1) >= 10 ? (date.getMonth()+1) : '0'+(date.getMonth()+1)
				const day = (date.getDate()) >= 10 ? (date.getDate()) : '0'+(date.getDate())
				let weekday = date.getDay()
				return year+'-'+month+'-'+day
			},
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	.father-box {
		background-color: #FFFFFF;
		box-shadow: #C8C7CC;
		width: 93%;
		margin: 20upx auto;
		border: 1px dashed #999999;
		border-radius: 20upx;
		height: 500px;
	}
	.date {
		margin: 20upx 0upx 20upx 50upx;
		height: 60upx;
		display: inline-flex;
	}
	.content {
		display: block;
		font-size: $uni-font-size-base;
		color: #24292E;
		margin-left: 60upx;
		margin-right: 60upx;
		.list-box {
			display: flex;
			flex: 1;
			.item-box {
				width: 300upx;
				height: 30px;
				line-height: 30px;
				margin-bottom: 10px;
				border: 1px solid $theme-color;
				border-radius: 10px;
				padding: 0 10px;
				text-align: center;
			}
			button {
				width: 50px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				font-size: $uni-font-size-base;
			}
		}
	}
	.text-btn {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		text-decoration: underline;
	}
	.popup-wrap {
		background-color: #ffffff;
		min-height: 200px;
		.popup-header {
			display: flex;
			flex-direction: row-reverse;
			font-size: $uni-font-size-base;
			color: #666;
			border-bottom: 1px $theme-color solid;
			.popup-header-item {
				height: 50px;
				line-height: 50px;
				padding: 0 15px;
				color: $theme-color;
			}
		}
		.popup-content {
			padding: 10px;
		}
	}
</style>

